<template lang="pug">
  .wx-cards(v-if='getCardList')
    .fixed-title
      h3 卡卷列表
    Scroll.card-scroll(:data="getCardList")
      .card-list
        .card-item(v-for='(item, index) in getCardList', :key='index')
          .icon-logo
            img(:src="item.logo_media_url", alt='')
          .top.tac
            h3 {{item.brand_name}}
            h1 {{item.title}}
          .desc.tac
            p 卡卷类型：{{cardTypeMap[item.card_type]}}
          van-button(size='large', type='primary', plain, @click='drawCard(item.card_id)') 立刻领取
</template>

<script>
import Scroll from 'Comps/Scroll'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      timer: null
    }
  },
  created() {
    this.$store.dispatch('fetchCardsInfo')
    this.cardTypeMap = {
      CASH: '现金券',
      DISCOUNT: '折扣券',
      GIFT: '礼品券',
      GROUPON: '团购券',
      GENERAL_COUPON: '优惠券'
    }
  },
  mounted() {
    if(this.panoWxCardList && this.panoWxCardList.length <= 0){
      this.$router.push(`/panoview/${this.$route.params.panoId}`)
    }
  },
  computed: {
    ...mapGetters([
      'panoWxCardList',
      'cardList'
    ]),
    getCardList() {
      // return [
      //   {
      //     logo_media_url: 'https://editor.vgoyun.com/plugins/api/cards/mmbiz/image/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXpfanBnLzIwMEpuRUY5WFNPQjgxT2tqWTV3UEJoYW5pY1dBbmN3WEVlaWNMZ2x1MUN1UjVTUXVtQU10ZWlhSldKTnhMaWNRUEhQbDVCRHVPUmRzaEpBSjJESE0wUWhCdy8w',
      //     brand_name: '8888',
      //     title: '666',
      //     card_type: 'CASH',
      //     card_id: 'pI9OPwJYC3rcFCLMQhGAvOT2nc-E',
      //   }
      // ]
      let list = []
      if(this.cardList.length > 0) {
        this.cardList.map(item => {
          if(item.date_info_type != 'DATE_TYPE_FIX_TIME_RANGE') {
            list.push(item)
          } else {
            if((item.end_timestamp * 1000) > Date.now()) {
              list.push(item)
            }
          }
        })
        return list
      }
    }
  },
  methods: {
    drawCard(cardId) {
      this.$store.dispatch('getCardInfo', cardId)
    }
  },
  components: {
    Scroll
  },
  filters: {
    formatTime(ns) {
      if(!ns) return
      let res = new Date(parseInt(ns) * 1000).toLocaleString()
      let ary = res.split(' ')
      let d = new Date(ary[0])
      let str = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()} ${ary[1].substring(2)}`
      return str
    }
  }
}
</script>

<style lang="stylus">
.wx-cards
  position: fixed
  top: 0
  bottom: 0
  width: 100%
  background-color: #fff
  z-index: 101
  .fixed-title
    position: fixed
    top: 0
    left: 0
    right: 0
    height: 40px
    line-height: 40px
    font-size: 16px
    color: #333
    background: #fff
    text-align: center
    z-index: 2
    h3
      margin: 0
      font: inherit
  .card-scroll
    position: fixed
    top: 40px
    bottom: 0
    left: 0
    right: 0
  .card-list
    padding: 10px
    .card-item
      margin-top: 10px
      padding: 10px
      background: #fff
      .icon-logo img
        width: 80px
        height: 80px

      .top
        padding: 15px 0
        h1
          font-size: 22px
          color: #333
          margin-top: 10px
          font-weight: normal
        h3
          font-size: 14px
          color: #ccc
          font-weight: normal
      .desc
        padding: 10px 0
        p
          line-height: 18px
          font-size: 12px
          color: #444040
  .card-input
    .label
      font-size: 14px
      font-weight: 400
      padding: 20px 15px 15px
      color: rgb(69, 90, 100)
</style>
